<template>
  <div>
    <p>eat: {{ obj.hobby.eat }}</p>
    解决方式方法 2
    <button @click="obj = { hobby: { eat: '🍜' } }">修改 eat</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const obj = ref({
      hobby: {
        eat: '西瓜',
      },
    })

    // 和上面类似
    /* reactive({
      value: {
        hobby: {
          eat: '西瓜',
        },
      }
    }) */

    // !这儿并没有触发监听，因为 watch 监听 ref 数据默认是浅监听（监听的只是第一层的变化）
    // 谁是第一层？obj.value
    watch(obj, () => {
      console.log('触发监听')
    })

    return { obj }
  }
}
</script>

<style lang="scss" scoped></style>